<template>
  <div>
    <!-- 导航菜单开始 -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
    >
      <!-- 子菜单1 -->
      <el-submenu
        :index="item.per_id + ''"
        v-for="item of menulist"
        :key="item.per_id"
      >
        <!-- 一级菜单标题 -->
        <template slot="title">
          <span>{{ item.per_name }}</span>
        </template>
        <!-- 一级菜单对应的二级菜单 -->
        <el-menu-item
          :index="subitem.per_id + ''"
          v-for="subitem of item.children"
          :key="subitem.per_id"
          @click="handlerRoute(subitem)"
        >
          {{ subitem.per_name }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item @click="changePassword">
        <span slot="title">修改密码</span>
      </el-menu-item>
      <el-menu-item @click="exit">
        <span slot="title">安全退出</span>
      </el-menu-item>
    </el-menu>
    <!-- 导航菜单结束-->
    
    <el-dialog title="密码修改" :visible.sync="updDialogFormVisible">
      <el-form>
        <el-form-item label="登录者账号" :label-width="formLabelWidth">
          <el-input
            type="text"
            v-model="loginform.staff_telephone"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="loginform.staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="loginform.staff_newPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="loginform.staff_newPassword1"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUpd()">确定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>
<script>
import {md5} from '../MD5'
export default {
  data() {
    return {
      menulist: [],
      loginform: {
        staff_telephone: sessionStorage.getItem("user"),
        staff_password: "",
        staff_newPassword: "",
        staff_newPassword1: "",
      },
      staff_id: "",
      formLabelWidth: "120px",
      updDialogFormVisible: false,
    };
  },
  methods: {
    handlerRoute(subitem) {
      this.$router.push(subitem.per_href);
    },
    changePassword() {
      this.updDialogFormVisible = true;
    },
    saveUpd() {
      this.$axios
        .post("/login.do", {
          staff_telephone: this.loginform.staff_telephone,
          staff_password: md5(this.loginform.staff_password),
        })
        .then((res) => {
          if (res.data.message == "登录成功") {
            this.$axios
              .post("/index/change", {
                staff_telephone: this.loginform.staff_telephone,
                staff_password: md5(this.loginform.staff_newPassword1),
              })
              .then((res) => {
                if (res.data.message == "修改成功") {
                  alert("修改密码后登录");
                  sessionStorage.clear();
                  this.$router.push( "/" );
                } else {
                  alert("修改失败");
                }
              })
              .catch((error) => {});
          } else {
            alert("旧密码错误");
          }
        })
        .catch((error) => {});
    },
    exit(){
      sessionStorage.removeItem("user");
      this.$router.push( "/" );
    }
  },
  //发送请求获取数据挂载到导航菜单中，需要将登录成功的用户名带的服务器
  mounted() {
    var tel = sessionStorage.getItem("user");
    this.$axios
      .get("/menus/" + tel)
      .then((res) => {
        this.menulist = res.data.data; //响应回来的集合赋值给menulist
      })
      .catch((error) => {});
  },
};
</script>